import React, { Component } from 'react';
import { Button, Card, Table } from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import BasicInfor from './BasicInfor';
import ContactPage from '../../AccuFundService/AccuServiceHandle/ContactPage';
import ProRecording from '@/pages/components/Problem/ProblemPage/ProRecording';
import HdlRemark from '@/pages/components/HdlRemark';

@connect(({ dimission: { detailInfor }, loading }) => ({
  detailInfor,
  loading: loading.models.dimission,
}))
class dimissionDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    const { dimissionId } = location.query;
    dispatch({
      type: 'dimission/getDimissionInfor',
      payload: { dimissionId },
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const opermars = {
      data: {
        list: [],
        pagination: {
          current: 1,
          pageSizes: 10,
          pageSize: 10,
          total: 10,
        },
      },
      detail: {
        empDimiContHisList: [],
        empDimission: {},
        ordHdlRemarkDtos: [],
      },
      detailInfor: {
        empDimiContHisList: [],
        empDimission: {},
        ordHdlRemarkDtos: [],
        rsgnDets: [],
      },
      dimHistory: [],
      proListData: {
        list: [],
        pagination: {
          current: 1,
          pageSizes: 10,
          total: 0,
        },
      },
      proBaseList: {},
      proFbList: [],
    };
    dispatch({
      type: 'dimission/updateData',
      payload: opermars,
    });
  }

  submitback = () => {
    router.goBack();
  };

  render() {
    const { detailInfor } = this.props;
    const socialAccuColumn = [
      {
        title: '产品',
        dataIndex: 'assName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        key: 'assName',
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        key: 'areaName',
      },
      {
        title: '业务结束日期',
        dataIndex: 'endDate',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        key: 'endDate',
        render: text => moment(text).format('YYYY-MM-DD'),
      },
    ];
    return (
      <PageHeaderWrapper>
        <Card title={<span>基本信息</span>}>
          <BasicInfor empDimission={detailInfor.empDimission} detail />
        </Card>
        <Card title={<span>社保公积金信息</span>}>
          <Table
            columns={socialAccuColumn}
            style={{ width: '50%', marginTop: 8 }}
            dataSource={detailInfor.rsgnDets}
            pagination={false}
          />
        </Card>
        <Card title={<span>联系记录</span>}>
          {detailInfor.empDimiContHisList.length ? (
            <ContactPage contactList={detailInfor.empDimiContHisList} dimDetail />
          ) : (
            '暂无数据'
          )}
        </Card>

        <HdlRemark hdlRemark={detailInfor.ordHdlRemarkDtos} />
        <ProRecording proRecording={detailInfor.probDets} />
        <FooterToolbar>
          <Button onClick={this.submitback}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default dimissionDetail;
